<script   setup lang='ts'>
// import { ref } from 'vue';
import {ref, onBeforeMount,onBeforeUpdate,onMounted,onBeforeUnmount,onUpdated,onUnmounted} from 'vue'

//挂载阶段onBeforeMount onMounted
onBeforeMount(()=>{
    console.log("onBeforeMount");
    
})
onMounted(()=>{
    console.log("onMounted");
    
})
//更新阶段onBeforeUpdate  onUpdated
onBeforeUpdate(()=>{
    console.log("onBeforeUpdate");
    
})
onUpdated(()=>{
    console.log("onUpdated");
    
})
// 销毁阶段 onBeforeUnmount  onUnmounted
onBeforeUnmount(()=>{
    console.log("onBeforeUnmount");
    
})

onUnmounted(()=>{
    console.log("onUnmounted");
    
})

const username = ref("")

// v2+ v3 的混写模式
    //    export default{
    //     data(){
    //         return{
    //             // 响应式数据
    //             name:"张三"
    //         }
    //     },
    //     methods:{
    //         test(){
    //             alert(123)
    //         },
    //         login(){
    //             this.test()
    //         },
        
    //     },
    //     setup(){

    //         // setup标记
    //        const username =  ref("123")
    //        return {username}
    //     }
    //    }
</script>
       
<template>
       <!-- <input type="text" v-model="name">
       <p>{{ name }}</p>
       <input type="text" v-model="username">
       <p>{{ username }}</p>
       <button @click="login">登录</button> -->
       <h1>生命周期</h1>
       <input type="text"  v-model="username">
</template>
       
<style scoped>
       
</style>